<template>
    <div class="comp-asset-drop">
        <div class="header" @click="toggle($event)">
            <div class="drop-item">
                <span class="img" :class="'coin-' + coinType.toLowerCase()"></span>
                <!--<img :src="'../img/'+coinType.toLowerCase()+'@2x.png'" alt="" class="img">-->
                <span class="text" >{{coinType}}</span>
                <i class="icon-allow-down" :class="{'icon-allow-down--up':show}"></i>
            </div>
        </div>
        <div class="body" v-if="show">
            <ul class="list">
                <li class="list-item drop-item"
                    v-for="item in coinList"
                    @click="changeCoin(item)"
                    :class="{'list-item--active':item === coinType,'coin-act':coinType === item}">
                    <!--<img :src="'../img/'+item.toLowerCase()+'@2x.png'" alt="item" class="img">-->
                    <span class="img" :class="'coin-' + item.toLowerCase()"></span>
                    <span class="text">{{item}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script type="text/babel">


    export default {
        components: {},
        data() {
            return {
                show:false
            };
        },
        props: {
            coin:{
                default:'BTC'
            },
            coinList:{
                default:[]
            },
            onSuccess:{
                default:function (val) {}
            }
        },
        computed: {
            coinType: function () {
                return this.coin
            }
        },
        created() {

        },
        mounted() {
            $(document).on('click', (e) => {
                if (this.show === true) {
                    this.show = false;
                }
            });
        },

        methods: {
            changeCoin(coinType){
                this.coinType = coinType;
                this.onSuccess(coinType);
                this.show = false;
            },

            toggle($event) {
                $event.stopPropagation();
                if (this.show === true) {
                    this.show = false;
                } else {
                    this.show = true;
                }
            },
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-asset-drop {
        position: relative;
        display: inline-block;
        z-index: 2;
        .header{
            width: 120px;
            padding-right: 16px;
            border-right: 1px solid #f2f2f2;
        }
        .body{
            position: absolute;
            background-color: #fff;
            width: 652px;
            max-height: 320px;
            overflow-y: scroll;

            box-shadow: 0 0 6px 4px #f8f8f8;
            border-radius: 6px;

        }
        .drop-item{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            cursor: pointer;
            border: 1px #fff solid;
            >.img{
                margin-right: 10px;
                display: inline-block;
                width: 32px;
                height: 32px;
                background-image: url('../../../img/bch@2x.png');
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                @each $coin in btc, eth, ltc, act, smc, let, omg, eos, btm, tv, usc,
                        bcd,bch,bchc,bta,btd,btg,lbtc,sbtc,abtc,bck,btp,yoyow,trx,cbtc,bcx,ssc,emo,etf,etg,bth,sltc,lts,aac,kcash,btf,lch ,usdt,smcf1,vca,hmc,
                        gto, wtc, storj, salt, topc, appc {
                    &.coin-#{$coin} {
                        background-image: url('../../../img/#{$coin}@2x.png');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                    }
                }
            }

            >.text{
                display: inline-block;
                min-width: 48px;
                text-align: left;
            }
        }

        .list{
            padding: 24px 16px;
            display: flex;
            flex-wrap: wrap;
            &-item{
                flex: 0 0 120px;
                width: 120px;
                text-align: center;
                border: 1px #fff solid;
                border-radius: 22px;
                transition: all 0.4s ease;
                &:hover {
                    border: 1px #f2f2f2 solid;
                }
                &--active{
                    border: 1px #f2f2f2 solid;
                    background-color: #f2f2f2;
                    border-radius: 22px;
                }
            }
        }


        .icon-allow-down{
            transition: all 0.4s ease;
            &--up{
                transform: rotate(180DEG);
            }
            font-size: 18px;
            transform-origin: 50% 47%;
        }




        // 滚动条样式
        ::-webkit-scrollbar {
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #fff;
            border: 1px solid #eee;
        }
    }
</style>